<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>form</title>
  </head>
  <body>
    <h1>表单</h1>

    <form action="#" method="post">
      <fieldset>
        <legend>表单分组 - HTML经典表单控件</legend>
        <p>单行文本框：</p>
        <p><input name="" type="text" placeholder="输入姓名..." /></p>
        <p><input type="text" value="英文名" disabled /></p>

        <p>
          密码框：
          <input type="password" />
        </p>

        <p>
          单选框+label 性别：
          <label>
            <input type="radio" name="gender" value="1" />
            男
          </label>
          <label>
            <input type="radio" name="gender" value="0" />
            女
          </label>
          <label>
            <input type="radio" name="gender" checked value="2" />
            保密
          </label>
        </p>

        <p>
          单选框+label(html4中用for属性与radio的id属性绑定，达到点对应文字都可以选中radio) 性别：

          <input type="radio" name="gender" id="male" value="1" />
          <label for="male">男</label>

          <input type="radio" name="gender" id="female" value="0" />
          <label for="female">女</label>

          <input type="radio" name="gender" id="uknown" checked value="2" />
          <label for="uknown">保密</label>
        </p>

        <p>
          姓名：
          <input type="text" />
        </p>
        <p>
          性别：
          <label>
            <input type="radio" name="gender2" value="1" />
            男
          </label>
        </p>
        <p>
          性别：
          <label>
            <input type="radio" name="gender2" value="0" />
            女
          </label>
        </p>

        <p>
          多选框 兴趣爱好：
          <label>
            <input type="checkbox" name="hobby" checked value="唱" />
            唱
          </label>
          <label>
            <input type="checkbox" name="hobby" value="跳" />
            跳
          </label>
          <label>
            <input type="checkbox" name="hobby" value="rap" />
            rap
          </label>
          <label>
            <input type="checkbox" name="hobby" value="篮球" />
            篮球
          </label>
        </p>

        <p>
          下拉菜单 省份：
          <select>
            <option value="湖北省">湖北省</option>
            <option value="湖南省">湖南省</option>
            <option value="安徽省">安徽省</option>
            <option value="陕西省">陕西省</option>
          </select>
          城市：
          <select>
            <option value="西安市">西安市</option>
          </select>
          区域：
          <select>
            <option value="雁塔区">高新区</option>
          </select>
        </p>

        <p>
          分组下拉列表
          <label for="country">国家：</label>
          <select id="country" name="country" required>
            <option value="" disabled selected>请选择国家</option>
            <optgroup label="亚洲">
              <option value="CN">中国</option>
              <option value="JP">日本</option>
            </optgroup>
            <optgroup label="欧洲">
              <option value="FR">法国</option>
              <option value="DE">德国</option>
            </optgroup>
          </select>
        </p>

        <p>
          多行文本
          <textarea cols="100" rows="10"></textarea>
        </p>

        <p>
          按钮
          <button>我是一个button标签，是一个普通按钮</button>
          <input type="button" value="我是一个普通按钮" />
          <input type="submit" value="提交表单信息" />
          <input type="reset" value="重 置" />
        </p>
      </fieldset>
    </form>

    <form action="#" method="post">
      <fieldset>
        <legend>HTML5新增表单控件</legend>
        <p>
          颜色选择：
          <input type="color" />
        </p>
        <p>
          日期选择：
          <input type="date" />
        </p>
        <p>
          时间选择：
          <input type="time" />
        </p>
        <p>
          电子邮件（提交自动校验）：
          <input type="email" />
        </p>
        <p>
          必填项：
          <input type="text" required />
        </p>
        <p>
          数字（min最小值，max最大值）：
          <input type="number" min="2" max="10" />
        </p>
        <p>
          拖拽条：
          <input type="range" min="10" max="50" />
        </p>
        <p>
          搜索框（多一个清空按钮）：
          <input type="search" />
        </p>
        <p>
          网址：
          <input type="url" />
        </p>

        <p>
          datalist 控件：
          <input type="text" list="language-list" />
          <datalist id="language-list">
            <option value="Java">Java</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Python">Python</option>
            <option value="Go">Go</option>
            <option value="C++">C++</option>
          </datalist>
        </p>

        <p>
          <input type="submit" value="提交表单信息" />
        </p>
      </fieldset>
    </form>

    <fieldset>
      <legend>HTML不常用标签</legend>
      <form action="#" method="post">
        <p>
          details 和 summary
          <!-- open 属性为默认展开 -->
          <details>
            <summary>点击查看详情</summary>
            <p>这里是隐藏的内容，点击摘要时会展开。</p>
          </details>
          <details>
            <summary>点击查看详情</summary>
            <p>这里是隐藏的内容，点击摘要时会展开。</p>
          </details>
        </p>

        <p>
          progress 和 meter
          <label for="file">下载进度：</label>
          <progress id="file" value="80" max="100">80%</progress>

          <label for="disk">磁盘使用：</label>
          <meter id="disk" value="0.3">30%</meter>
        </p>
      </form>

      <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <p>
          output
          <input type="number" id="a" value="0" />
          +
          <input type="number" id="b" value="0" />
          =
          <output name="result">0</output>
        </p>
      </form>

      <p>
        ruby、rp、rt
        <ruby>
          基础文本
          <rp>(</rp>
          <rt>注音内容</rt>
          <rp>)</rp>
        </ruby>

        <!-- 给 汉字 添加拼音-->
        <ruby>
          汉
          <rp>(</rp>
          <rt>Hàn</rt>
          <rp>)</rp>
          字
          <rp>(</rp>
          <rt>zì</rt>
          <rp>)</rp>
        </ruby>
      </p>

      <p>
        rb
        <ruby>
          <rb>汉</rb>
          <rp>(</rp>
          <rt>Hàn</rt>
          <rp>)</rp>
          <rb>字</rb>
          <rp>(</rp>
          <rt>zì</rt>
          <rp>)</rp>
        </ruby>
      </p>
    </fieldset>
  </body>
</html>
